<template>
  <div class="manage">
    <div class="manage-header">
      <CommonForm
        :formItemList="searchForm.formItemList"
        :formData="searchForm.formData"
        :inline="searchForm.inline"
      >
        <el-button type="primary" @click="search" size="mini">搜索 <i class="el-icon-search"/></el-button>
        <el-button type="danger" @click="reset" size="mini">重置 <i class="el-icon-refresh-left"/></el-button>
      </CommonForm>
    </div>
    <!--    数据表格-->
    <div class="common-table">
      <el-table
        :data="table.tableData"
        height="85%"
        border
        stripe
        row-key="id"
        :header-cell-style="{background: '#eef1f6',color: '#606266',
        textAlign:'center',fontWeight:'bold',borderWidth:'3px'}"
      >
        <el-table-column prop="code" label="工号" min-width="125"/>
        <el-table-column prop="name" label="姓名" min-width="125"/>
        <el-table-column prop="phone" label="电话" min-width="125"/>
        <el-table-column prop="roomName" label="会议室名称" min-width="125"/>
        <el-table-column prop="createTime" label="申请时间" min-width="150"/>
        <el-table-column label="备注" width="200" prop="remark"/>
<!--        <el-table-column label="审核状态" min-width="80">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.isUpload === '0'" type="danger">未提交</el-tag>-->
<!--            <el-tag v-else-if="scope.row.isUpload === '1'" type="primary">已提交</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="190" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">上传会议纪要</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pager"
        layout="total,sizes,prev,pager,next,jumper"
        :page-size="table.pageConfig.size ? table.pageConfig.size : 10"
        :page-sizes="[5, 10, 15, 20]"
        :total="table.pageConfig.total"
        :current-page.sync="table.pageConfig.current"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
      :title="dialogForm.type === 'add' ? '新增会议室' : '上传'"
      :visible.sync="dialogForm.isShow"
      :before-close="handleClose"
    >
      <CommonForm
        :formItemList="dialogForm.formItemList"
        :formData="dialogForm.formData"
        :inline="dialogForm.inline"
      ></CommonForm>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm.isShow = false">取消</el-button>
        <el-button type="primary" @click="confirmUpload">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listMeeting} from "@/api/staffRoom";
import CommonForm from "../../../components/CommonForm.vue";
import {edit} from "@/api/staffRoom";
import {getUploadApi} from "@/api/docs";
import CommonTable from "@/components/CommonTable.vue";
import ro from "element-ui/src/locale/lang/ro";

export default {
  components: {CommonTable, CommonForm},
  data() {
    return {
      table: {
        tableData: [],
        pageConfig: {
          total: 10, // 记录总数
          current: 1, // 起始页
          size: 10 // 每页展示的记录数
        }
      },
      searchForm: {
        formItemList: [
          {
            name: 'name',
            label: '',
            type: 'input',
            icon: 'el-icon-search'
          }
        ],
        formData: {},
        inline: true
      },
      dialogForm: {
        isShow: false,
        formItemList: [
          {
            name: 'summary',
            label: '会议纪要',
            type: 'upload',
            uploadUrl: getUploadApi(), // 上传文件的接口
            headers: this.headers // 携带的头部数据
          }
        ],
        formData: {
          isUpload: '',
        },
        inline: true
      },
      isUpload: 1
    };
  },
  computed: {
    headers() {
      return {
        token: localStorage.getItem("token")
      }
    }
  },
  created() {
    this.loading()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleEdit(row) {
      this.dialogForm.isShow = true
      this.dialogForm.formData = row
    },
    confirmUpload() {
      // 在这里处理上传文件的逻辑
      edit(this.dialogForm.formData).then((response) => {
        this.dialogForm.formData.isUpload = this.isUpload
        if (response.code === 200) {
          this.$message.success("上传成功！")
          this.dialogForm.isShow = false
          this.loading()
        } else {
          this.$message.error("上传失败！")
        }
      })
    },
    search() {
      this.loading()
    },
    // 重置搜索表单
    reset() {
      this.searchForm.formData.name = ""
      this.loading()
    },
    loading() {
      listMeeting({
        current: this.table.pageConfig.current,
        size: this.table.pageConfig.size,
      }, this.formData).then(response => {
        if (response.code === 200) {
          this.table.tableData = response.data.list
          this.table.pageConfig.total = response.data.total
        } else {
          this.$message.error(response.message)
        }
      })
    },
    handleSizeChange(size) {
      this.table.pageConfig.size = size
      this.loading()
    },
    handleCurrentChange(current) {
      this.table.pageConfig.current = current
      this.loading()
    },
  },
};
</script>

<style lang="less" scoped>
.common-table {
  height: calc(100% - 62px);
  background-color: white;
  position: relative;

  .pager {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
}
</style>
